<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../css/menu5.css">
    <link rel="stylesheet" type="text/css" href="../css/menu5-1.css">
    <link rel="stylesheet" href="../js/menu5.js">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>

<body>
    <div style="position: fixed;width: 100%;">
        <div class="top" style="height: 90px;background-color: white;min-width: 1000px;">
            <div class="header_left" style="float: left;" width="13.14%">
                <img src="https://via.placeholder.com/250x90">
            </div>
            <ul style="float: right;" class="ulmenu" style="min-width: 1900px;">
                <li class="li0" onmouseover="move()" onmouseout="leave()"><a class="a0" href="">导航一</a></li>
                <li class="li0" onmouseover="move()" onmouseout="leave()"><a class="a0" href="">导航二</a></li>
                <li class="li0" id="menu" onmouseover="move()" onmouseout="leave()"><a class="a0" href="">导航三</a>
                    <div>
                        <ul id="move_menu">
                            <li><a href="">子导航一</a></li>
                            <li><a href="">子导航二</a></li>
                            <li><a href="">子导航三</a></li>
                            <li><a href="">子导航四</a></li>
                            <li><a href="">子导航五</a></li>
                        </ul>
                    </div>
                </li>
                <li class="li0" id="menu" onmouseover="move()" onmouseout="leave()"><a class="a0" href="">导航四</a>
                    <ul id="move_menu">
                        <li><a href="">子导航一</a></li>
                        <li><a href="">子导航二</a></li>
                        <li><a href="">子导航三</a></li>
                        <li><a href="">子导航四</a></li>
                    </ul>
                </li>
                <li class="li2" id="menu"><a class="a1" href="menu5.html">导航五</a>
                    <ul id="move_menu">
                        <li><a href="menu5-1.html">子导航一</a></li>
                        <li><a href="menu5-2.html">子导航二</a></li>
                        <li><a href="menu5-3.html">子导航三</a></li>
                        <li><a href="menu5-4.html">子导航四</a></li>
                    </ul>
                </li>
                <li class="li0" onmouseover="move()" onmouseout="leave()"><a class="a0" href="">导航六</a></li>
                <li class="li0" onmouseover="move()" onmouseout="leave()"><a class="a0" href="">导航七</a></li>
            </ul>
        </div>
    </div>

    <img id="title" src="https://via.placeholder.com/1920x400">

    <div class="left" style="position: fixed;">
        <ul>
            <li style="background-color:#99d022 ;"><a href="menu5-1.html">
                    <h1 style="color: #fff;">01&nbsp;&nbsp;<span style="color: #fff;">子导航一</span></h1>
                </a></li>
            <li><a href="menu5-2.html">
                    <h1>02&nbsp;&nbsp;<span>子导航二</span></h1>
                </a></li>
            <li><a href="menu5-3.html">
                    <h1>03&nbsp;&nbsp;<span>子导航三</span></h1>
                </a></li>
            <li><a href="menu5-4.html">
                    <h1>04&nbsp;&nbsp;<span>子导航四</span></h1>
                </a></li>
        </ul>
    </div>

    <div class="floor1-1">
        <div id="tit">标题</div>
        <div id="content">
            内容
            <br>
            内容
        </div>
        <div id="floor1pic">
            <img class="title" src="https://via.placeholder.com/1100x523" width="57.8%">
        </div>
    </div>

    <div class="floor1-2">
        <div id="floor1-20">
            <img id="floor1-20pic" src="https://via.placeholder.com/518x759" width="43.16%">
            <div id="floor2-title" >
                <span id="floor1-21">标题</span>
                <br>
                <span id="floor1-21">标题</span>
                <br>
                <br>
                <span id="floor1-22" >
                    <b id="floor1-220">内容</b>内容
                </span>
                <br>
                <img id="floor1-23" src="https://via.placeholder.com/410x61" >
                <div style="clear: both;"></div>
                <span id="floor1-24">标题</span>
                <br>
                <div id="floor1-25">
                    内容
                    <br>
                    内容
                    <br>
                    内容
                </div>
                <div id="floor1-26">
                    <a href="#"><img src="https://via.placeholder.com/150x26" alt=""></a>
                </div>
            </div>
            <div id="floor1-27"></div>
        </div>
    </div>

    <div class="floor1-3">
        <div id="floor1-31">
            <div id="floor1-32">
                <span id="floor1-33">标题</span>
                <br>
                <br>
                <span id="floor1-34">
                    <b id="floor1-35">内容</b><br>
                    内容
                </span>
                <br>
                <div id="floor1-36">
                    <a href="#"><img src="https://via.placeholder.com/150x26" alt=""></a>
                </div>
            </div>
            <img id="floor1-37" src="https://via.placeholder.com/900x628" alt="" width="75%">
            <div style="clear: both;"></div>
        </div>
    </div>

    <div class="floor1-4">
        <div id="floor1-41" >
            <img id="floor1-42" src="https://via.placeholder.com/681x383" alt="" width="56.75%">
            <div id="floor1-43">
                <span id="floor1-44">标题</span>
                <br>
                <br>
                <span id="floor1-45" >
                    <b id="floor1-46">内容</b><br>
                    内容
                </span>
                <br>
                <div id="floor1-47">
                    <a href="#"><img src="https://via.placeholder.com/150x26" alt=""></a>
                </div>
            </div>
            <div style="clear: both;"></div>
        </div>
    </div><br>

    <div class="floor1-5" style="width: 100%;height: auto;">
        <div style="width:63.06%;padding-top: 50px;padding-left: 18.47%;background: url(#) top center no-repeat;">
            <div class="floor2-title" style="text-align: left;margin: 100px 0 0 50px;">
                <span style="width: 500px;line-height: 50px;font-size: 40px; font-weight: 800;">标题</span>
                <br>
                <br>
                <span style="padding-top: 20px;font-size: 16px;line-height: 30px;width: 38.33%;">
                    <b style="font-weight: 800;color: #99d022;">内容</b>内容
                </span><br>
                <div style="margin-top: 30px;">
                    内容
                </div>
                <br>
                <div style="padding-top:50px;">
                    <a href="#"><img src="https://via.placeholder.com/150x26" alt=""></a>
                </div>
                <div style="clear: both;"></div>
            </div>
        </div>
    </div>

    <div class="btm">        
        <div class="left-icon" style="padding-left: 22%;">
            <img src="https://via.placeholder.com/24x24" alt=""><br>
            <img src="https://via.placeholder.com/24x24" alt="">
            <div style="clear: both;"></div>
        </div>
        <div class="btm-left" style="float: left;">
            <div>
                    <p>标题</p>
                    <div>内容</div>
            </div>
            <div>
                <p>标题</p>
                <div >内容</div>
            </div>              
        </div>
        <div class="left-icon">
            <img src="https://via.placeholder.com/24x24" alt="" ><br>
            <img src="https://via.placeholder.com/24x24" alt="">
            <div style="clear: both;"></div>
        </div>
        <div class="btm-left">
            <div>
                    <p>标题</p>
                    <div>内容</div>
            </div>
            <div>
                <p >标题</p>
                <div >内容</div>
            </div>              
        </div>
        <div class="btm-right">
            <div style="float: right;">
                <img src="https://via.placeholder.com/102x102" alt="">
                <p>二维码</p>
            </div>
            <div style="float: right;">
                <img src="https://via.placeholder.com/102x102" alt="">
                <p>二维码</p>
            </div>
            <div style="float: right;">
                <img src="https://via.placeholder.com/102x102" alt="">
                <p>二维码</p>
            </div>
        </div>
    
    </div>
    <div class="footer">
        内容
    </div>

    <div>
        <div class="menu5-min" id="min">
            <p>表单</p>
            <a href="javascript:fun1();"><img
                    src="http://sgoutong.baidu.com/embed/1610525758/asset/embed/css/pc/message/img/nodeMax.png" alt=""></a>
        </div>
        <div class="menu5-max" id="max">
            <div style="background: url(#);">
                <p id="formtit" >表单
                </p>
                <a href="javascript:fun2();"><img
                        src="http://sgoutong.baidu.com/embed/1610525758/asset/embed/css/pc/message/img/nodeMin.png"
                        alt="" style="float: right;margin: 2.5px 0;"></a>
            </div>
            <div class="menu5-max-til">
                <p id="co">公司</p>
                <p id="phone">电话</p>
            </div>
            <form report-submit="false" bindsubmit="" bindreset="" >
                <textarea  readonly>输入内容</textarea>
                <div>
                    <label for="username">
                        <img src="http://sgoutong.baidu.com/embed/1610525758/asset/embed/css/pc/message/img/user.png"
                            alt="" style="margin:10.5px 9px;">
                        <input type="text" id="username" placeholder="姓名">
                    </label>
                </div>
                <div>
                    <label for="password">
                        <img src="http://sgoutong.baidu.com/embed/1610525758/asset/embed/css/pc/message/img/nodephone.png"
                            alt="" style="margin:8.5px 11px;">
                        <input type="text" id="password" placeholder="密码（必填）">
                    </label>
                </div>
                <div>
                    <label for="place">
                        <img src="http://sgoutong.baidu.com/embed/1610525758/asset/embed/css/pc/message/img/nodelocation.png"
                            alt="" style="margin:9px 13.5px;">
                        <input type="text" id="place" placeholder="地址">
                    </label>
                </div>
                <input type="submit" id="submit" />
            </form>
        </div>
    </div>

    <a href="javascript:fun1();" id="rightbutton"></a>

    <script>
        function getScrollbarWidth() {
                var odiv = document.createElement('div'),
                styles = {
                    width: '100px',
                    height: '100px',
                    overflowY: 'scroll'
                }, i, scrollbarWidth;
                for (i in styles) odiv.style[i] = styles[i];
                document.body.appendChild(odiv);
                scrollbarWidth = odiv.offsetWidth - odiv.clientWidth;
                odiv.remove();
                return scrollbarWidth;
        }
        window.onload = () => {
                var wid= screen.width-getScrollbarWidth()+'px';
	            document.getElementsByTagName("body")[0].style.width  = wid;
            }
        function fun1() {
            document.getElementById('min').style.display = "none";
            document.getElementById('max').style.display = "block";
        }

        function fun2() {
            document.getElementById('min').style.display = "block";
            document.getElementById('max').style.display = "none";
        }

        function move() {
            var div10 = document.getElementsByClassName('li2')
            var div30 = document.getElementsByClassName('a1')
            div10[0].style.backgroundColor = "#fff";
            div30[0].style.color = "#000"
        }

        function leave() {
            var div20 = document.getElementsByClassName('li2')
            var div40 = document.getElementsByClassName('a1')
            div20[0].style.backgroundColor = "#99d022";
            div40[0].style.color = "#fff";
        }
    </script>
</body>

</html>